<template>
	<!--  -->
	<div class="content">
		<div class="pageSearchView">
			<el-form :inline="true" :model="searchParam" class="demo-form-inline">
				<el-form-item label="物料编码">
					<el-input v-model="searchParam.materialNo" placeholder="物料编码" clearable style="width: 200px" />
				</el-form-item>
				<el-form-item label="物料名称">
					<el-input v-model="searchParam.materialName" placeholder="物料名称" clearable style="width: 200px" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" :icon="Search" @click="getList()">查询</el-button>
					<el-button class="refreshBtn" :icon="Refresh" @click="resetSearch()">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="pageTableView">
			<div class="pageTableMenuView">
				<div class="pageTableTitle">列表信息</div>
			</div>
			<!-- 表格 -->
			<el-table class="pageTableClass" :data="paginatedData" border height="calc(100vh - 320px)">
				<el-table-column label="序号" align="center" width="70">
					<template #default="scope">
						<!-- 下标 + 1，计算公式：当前页数 * 每页大小 + 当前行的索引 + 1 --> {{ (pageSearch.current - 1) * pageSearch.pageSize +
					scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column label="物料编码" prop="materialNo" min-width="150" align="center"
												 show-overflow-tooltip />
				<el-table-column label="物料名称" prop="materialName" min-width="150" align="center"
												 show-overflow-tooltip />
				<el-table-column type label="库存数量" prop="count" min-width="150" align="center" />
				<el-table-column type label="库位名称" prop="storageName" min-width="150" align="center" />
				<el-table-column type label="仓库名称" prop="warehouseName" min-width="150" align="center" />

			</el-table>
			<div class="pagePagination">
				<el-pagination background v-model:current-page="pageSearch.current" v-model:page-size="pageSearch.pageSize"
											 :page-sizes="[10, 20, 50, 100, 200, 500]" layout="total, sizes, prev, pager, next"
											 :total="pageTotal"
											 @size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import axiosInstance from '@/utils/http/api';
import { Delete, Edit, Plus, Refresh, Search } from '@element-plus/icons-vue';

onMounted(() => {
	getList();

});


const pageSearch = ref({
	current: 1,
	pageSize: 10
});


const workOrderList = ref({});


const pageTotal = ref(null);//页面总数
const searchParam = ref({});//页面检索条件


const paginatedData = ref([]);
const formatType = (row, column, cellValue) => {
	const typeMap = {
		0: '新建',
		1: '入库',
		2: '出库',
		3: '完结'
	};
	return typeMap[cellValue] || '';
};

// 获取列表接口
const getList = () => {
	axiosInstance.post('/api/SparePartLog/getPage', {
		...searchParam.value,
		...pageSearch.value

	})
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			paginatedData.value = res.data.records;
			pageTotal.value = res.data.total;
		});
};

const handleSizeChange = (e) => {
	pageSearch.value.pageSize = e;
	getList();
};

const handleCurrentChange = (e) => {
	pageSearch.value.current = e;
	getList();
};

// 重置搜索条件
const resetSearch = () => {
	searchParam.value = {};
	pageSearch.value.current = 1;
	// current.value = 1
	getList();
};

</script>
<style scoped></style>
  